<template>
  <div>
    <scroll-area :bot-margin="50">
      <div class="sub-header q-ma-sm">{{ 'Hard Time Replacement Task' }}</div>
      <q-table
        :rows="parent"
        :columns="cols"
        :row-key="row=>row.id"
        :rows-per-page-options="[6]"
        class="q-ma-sm my-table"
        wrap-cells
      >
        <template v-slot:body-cell-stock_code="props">
          <q-td>
            {{ props.value }}
          </q-td>
        </template>
        <template v-slot:body-cell="props">
          <q-td>
            {{ props.value }}
          </q-td>
        </template>

        <template v-slot:body-cell-last="props">
          <q-td>
            {{
              props.row.last_replaced != null
                ? props.row.last_replaced.slice(0, 7)
                : ''
            }}
          </q-td>
        </template>

        <template v-slot:body-cell-next="props">
          <q-td
          :class="{
              fail:
                (props.row.is_critical) ||
                (props.row?.diff == 0),

              warning:
                props.row?.diff <= 6 &&
                props.row?.diff > 3 
              
            }"
          >
            <!-- :class="
              props.row.next_replace != null
                ? getHardTimeReplacementStatus(
                    props.row.next_replace.slice(0, 7)
                  )
                : ''
            " -->
            {{
              props.row.next_replace != null
                ? props.row.next_replace.slice(0, 7)
                : ''
            }}

            <q-tooltip
              class="bg-indigo"
              :offset="[10, 10]"
              v-if="props.row.next_replace != null"
            >
              {{ checkDiff(props.row?.diff) }}
            </q-tooltip>
          </q-td>
        </template>

        <template v-slot:body-cell-serial_no="props">
          <q-td>
            {{ props.row.serial_no }}
          </q-td>
        </template>

        <template v-slot:body-cell-period="props">
          <q-td>
            {{ props.row.period }}
          </q-td>
        </template>
      </q-table>

      <!-- <div class="text-h> q-ma-sm" v-if="childs.length > 0">
      {{ ' Child Hard Time Replacement Task' }}
    </div> -->
      <div class="sub-header" v-if="childs.length > 0">
        Childs Hard Time Replacement Task
      </div>
      <q-table
        v-if="childs.length > 0"
        :rows="childs"
        :row-key="row=>row.id"
        :columns="cols"
        :rows-per-page-options="[6]"
        class="q-ma-sm my-table"
        wrap-cells
      >
        <template v-slot:body-cell-stock_code="props">
          <q-td>
            <!-- {{ props.row.stock_item.stock_code }} -->
            {{ props.value }}
          </q-td>
        </template>

        <template v-slot:body-cell="props">
          <q-td>
            <!-- {{ props.row.stock_item.stock_code }} -->
            {{ props.value }}
          </q-td>
        </template>
        <template v-slot:body-cell-last="props">
          <q-td>
            {{
              props.row.last_replaced != null
                ? props.row.last_replaced.slice(0, 7)
                : ''
            }}
          </q-td>
        </template>

        <template v-slot:body-cell-next="props">
          <q-td
          :class="{
              fail:
                (props.row.is_critical) ||
                (props.row?.diff == 0),

              warning:
                props.row?.diff <= 6 &&
                props.row?.diff > 3 
              
            }"
          >
            {{
              props.row.next_replace != null
                ? props.row.next_replace.slice(0, 7)
                : ''
            }}

            <q-tooltip
              class="bg-indigo"
              :offset="[10, 10]"
              v-if="props.row.next_replace != null"
            >
              {{ checkDiff(props.row?.diff) }}
            </q-tooltip>
          </q-td>
        </template>

        <template v-slot:body-cell-serial_no="props">
          <q-td>
            {{ props.row.serial_no }}
          </q-td>
        </template>

        <template v-slot:body-cell-period="props">
          <q-td>
            {{ props.row.period }}
          </q-td>
        </template>
      </q-table>
    </scroll-area>
  </div>
</template>
<script setup lang="ts">
import { useQuasar } from 'quasar';
import { PartItemHTReplacement } from 'src/services/type';
import { onMounted, ref } from 'vue';
import { deleteStockItemHtreplace } from 'src/services/stockCodeService';
import { getPartHardTimeReplacement } from 'src/services/partsService';
import { getHardTimeReplacementStatus, checkDiff } from 'src/utils/getPublic';
import ScrollArea from '../ScrollArea.vue';

const props = defineProps<{
  stockCode: string;
  serial_no: string;
}>();

const $q = useQuasar();
const id = ref(0);
const editDiag = ref(false);
const parent = ref<PartItemHTReplacement[]>([]);
const childs = ref<PartItemHTReplacement[]>([]);
const align = 'left';
const cols = [
  {
    name: 'description',
    label: 'Short Description',
    field: 'description',
    sortable: true,
    align,
  },
  {
    name: 'serial_no',
    label: 'Serial No',
    field: 'serial_no',
    sortable: true,
    align,
  },
  {
    name: 'component',
    label: 'Component',
    field: 'component',
    sortable: true,
    align,
  },

  {
    name: 'last',
    label: 'Last Replace Time',
    field: 'last_replaced',
    sortable: true,
    align,
  },
  {
    name: 'next',
    label: 'Next ReplaceTime',
    field: 'next_replace',
    sortable: true,
    align,
  },
  {
    name: 'period',
    label: 'Period(Months)',
    field: 'period',
    sortable: true,
    align,
  },
];

async function initData() {
  const res = await getPartHardTimeReplacement(
    props.stockCode,
    props.serial_no,
  );

  /* const data = [
    { stock_code:'1111111111',serial_no:'123',component: 'Test', last_replaced: '2036/05', next_replace: '2035/07' },
    { stock_code:'1111111111',serial_no:'123',component: 'Test', last_replaced: '2036/05', next_replace: '2035/07' },
    { stock_code:'child1',serial_no:'222',component: 'Test', last_replaced: '2036/03', next_replace: '2035/07' },
    { stock_code:'child2',serial_no:'333',component: 'Test', last_replaced: '2036/04', next_replace: '2035/07' },
  ] as PartItemHTReplacement[]; */
  if (res.data) {
    console.log(res.data);
    let unique = {}

    for (let d of res.data){
      unique[d.id] = d
    }
    const uniqueArr = []
    console.log(unique);
    for (let key in unique){
      uniqueArr.push(unique[key])
    }
    
    parent.value = uniqueArr.filter(
      (item) => item.stock_code == props.stockCode
    );
    childs.value = uniqueArr.filter(
      (item) => item.stock_code != props.stockCode
    );
  }
}

function editFn(sie_id: number) {
  id.value = sie_id;
  editDiag.value = true;
}
function deleteFn(id: number) {
  $q.dialog({
    title: 'Confirm',
    message: 'Are you sure to delete this record?',
    cancel: true,
  }).onOk(async () => {
    const res = await deleteStockItemHtreplace(id);
    if (res) {
      initData();
    }
  });
}
onMounted(() => {
  initData();
});
</script>
